<template>
  <div style="background-color: #eee">
    <div>
      <van-nav-bar
        :title="title"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      >
        <!-- <template #title>
                <span >{{special.name}} </span>
            </template> -->
      </van-nav-bar>
    </div>

    <div class="selfInfo" v-for="(item, index) in postCurrentList" :key="index">
      <router-link
        :to="{
          path: '/postDetail',
          query: { postsId: item.postsId },
        }"
      >
        <div class="infoTitle">
          <span>{{ item.title }}</span>
          <!-- <span class="postTime"></span> -->
        </div>
        <div class="infoTopPic">
          <img :src="item.avatar" alt="" />
        </div>
        <div class="infoName">
          <span style="padding-top: 4px">{{ item.userName }}</span>
          <p class="infoTime" style="margin: 0; padding-top: 4px">
            <!-- 2021-07-08 10:35 -->{{ item.sendTime }}
          </p>
        </div>
        <!-- 发表的内容名 -->
        <div class="postListContent">
          {{ item.intro }}
        </div>
        <div class="listPic">
          <img :src="item.coverImgUrl" alt="" />
        </div>
      </router-link>
      <!--评论点赞 -->
      <div
        class="postBot"
        style="width: 300px; margin-left: 20px; margin-top: 10px"
      >
        <div class="thumb">
          <li @click="zanCount(item)">
            <van-icon name="good-job-o" :badge="item.zan" />
          </li>

          <li><van-icon name="eye-o" :badge="item.readNum" /></li>
          <!-- <li><van-icon name="chat-o" badge="9" /></li> -->
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { Toast } from "vant";
import { postCurrentList, like, categoryList } from "../api/api";
export default {
  name: "SearchBox",
  data() {
    return {
      postCurrentList: {},
      categoryId: "",
      badge: "",
      special: "",
      title: "",
    };
  },
  methods: {
    zanCount(item) {
      console.log(item);
      // 点赞+1
      like(item.postsId).then((res) => {
        console.log(res);
      });
    },
    onClickLeft() {
      Toast("返回");
      window.history.back(-1);
    },
  },
  created() {
    console.log(this.$route.query.categoryId);
    postCurrentList(this.$route.query.categoryId).then((res) => {
      console.log(res);
      if (res.code == 0) {
        this.postCurrentList = res.rows;
          this.postCurrentList.reverse();

      }
    });
    // 专题列表
    categoryList().then((res) => {
      console.log(res);
      if (res.code === 0) {
        for (let i = 0; i < res.rows.length; i++) {
          if (this.$route.query.categoryId == res.rows[i].categoryId) {
            this.title = res.rows[i].name;
          }
        }
      }
    });
  },
};
</script>

<style scoped  lang="less">
/deep/.van-nav-bar__content {
  background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-button--info {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
.selfInfo {
  margin: auto;
  margin-top: 5%;
  width: 100%;
  /* height: 350px;  */
  /* border: 1px solid red;  */
  background-color: white;
}
.infoTitle {
  margin: 20px 0 10px 20px;
  /* width: 100px; */
  height: 34px;
  line-height: 34px;
  text-align: left;
  font-size: 20px;
  color: black;

  /* border: 1px solid black; */
}

.infoTopPic {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  /* border: 1px solid blue; */
  border-radius: 20px;
  color: black;
}
.infoTopPic > img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.infoName {
  margin-left: 60px;
  margin-top: 20px;
  padding-left: 10px;
  /* width: 140px; */
  /* height: 20px; */
  vertical-align: middle;
  font-size: 12px;
  text-align: left;
  color: black;
}
.postListContent {
  margin: 7% 0 2% 8%;
  width: 80%;
  text-align: left;
  color: black;

  /* text-indent: 2em; */
}
.listPic {
  margin: auto;
  width: 86%;
}
.listPic > img {
  width: 100%;
}
.thumb {
  display: flex;
  flex-direction: row-reverse;
  /* justify-content: space-around; */
  list-style: none;
}
.thumb > li:first-child {
  /* padding-right: 10px;
  text-align: right; */
  padding-top: 10px;
  padding-right: 12%;
}
/* .thumb > li:nth-child(2) {
  padding: 0 14px;
  padding-top: 2px;
} */
.thumb > li:last-child {
  /* padding-right: 50px; */
  /* padding-top: 2px;
  font-size: 16px;
  text-align: left; */
  padding-right: 10%;
  padding-top: 10px;
  font-size: 16px;
}
</style>